var req;
var isIE;

function init() {
    colorChooser = document.getElementById("colorChooser");
}

function performImageChange(productRef) {
    if(colorChooser.value != "default"){
        var url = "/changeImage?ref=" + productRef + "&color=" + escape(colorChooser.value);
        req = initRequest();
        req.open("GET", url, true);
        req.onreadystatechange = callback;
        req.send(null);
    }
}

function callback() {
    //A readyState of "4" signifies the completion of the HTTP interaction
    if (req.readyState == 4) {
        //200 means "success"
        if (req.status == 200) {
            productImage = document.getElementById("productImage");
            productImage.setAttribute("src", "/serve?blob-key=" + req.responseText);
        }
    }
}

function initRequest() {
    if (window.XMLHttpRequest) {
        if (navigator.userAgent.indexOf('MSIE') != -1) {
            isIE = true;
        }
        return new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        isIE = true;
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
}